<template>
    <div class="plat">
    <mt-header title="移动报表">
      <router-link to="/" slot="left">
        <mt-button icon="back">返回</mt-button>
      </router-link>
    </mt-header>
    <div class="search" >
     
      <i class="mintui mintui-search"></i>
        <!-- <mt-button type="primary" @click="openStartPicker()">查询</mt-button> -->
        <!-- <mt-button type="primary" @click="openStartPicker()">查询</mt-button> -->
        <p  @click="openStartPicker()" v-text="startTime"></p>-
         <p  @click="openEndPicker()" v-text="endTime"></p>
        <mt-button type="primary" @click="searchPlat()">查询</mt-button>
      
     
    </div>
         
    <div class="showPlat" >
      <mt-navbar v-model="platSelect">
        <mt-tab-item id="gm">工贸</mt-tab-item>
        <mt-tab-item id="cy">产业</mt-tab-item>
      </mt-navbar>
      <!-- tab-container -->
      <mt-tab-container v-model="platSelect">
        <mt-tab-container-item id="gm">
          <mt-cell>
            <div @click="platSelectShow">
              <table border="1" cellspacing='0'>
                  <thead>
                    <td>工贸名称</td>
                    <td>创建量</td>
                    <td>回复量</td>
                    <td>手动满意量</td>
                  </thead>
                <tr v-for="(e,i) in platInData">
                  <td>{{e.gmName}}</td>
                    <td>{{e.countDay}}</td>
                    <td>{{e.countDayLog}}</td>
                    <td>{{e.countDayGood}}</td>
                </tr>
              </table>
            </div>
          </mt-cell>
        </mt-tab-container-item>
        <mt-tab-container-item id="cy">
          <mt-cell>
            <div @click="platSelectShow">
             <table border="1" cellspacing='0'>
              <thead>
                <td>产业名称</td>
                <td>创建量</td>
                <td>回复量</td>
                <td>手动满意量</td>
              </thead>
             <tr v-for="(e,i) in platInData">
               <td>{{e.industryName}}</td>
                <td>{{e.countDay}}</td>
                <td>{{e.countDayLog}}</td>
                <td>{{e.countDayGood}}</td>
             </tr>
           </table>
            </div>
          </mt-cell>
        </mt-tab-container-item>
      </mt-tab-container>
    </div>
    <mt-datetime-picker
      ref="startPicker"
      type="date"
      @confirm="handleStartConfirm"
      >
    </mt-datetime-picker>
    <mt-datetime-picker
      ref="endPicker"
      type="date"
       @confirm="handleEndConfirm">
    </mt-datetime-picker>
    <loading v-show="showLoading"></loading>
  </div>
</template>

<script>
import loading from "@/components/loading.vue";
import date from "@/components/date.vue";
import { Toast, Indicator,Field  } from 'mint-ui';
export default {
    name:'plat',
    components: {
        loading,
    }, 
    data() {
        return {
           platInData:[],
           platSelect:'gm',
           startTime:this.format(new Date(), 'yyyy-MM-dd'),
           endTime:this.format(new Date(), 'yyyy-MM-dd')
        }
    },
    methods:{
      platInFo(e) {
        //加载数据
        this.showLoading = true;
        this._https({
          url: "/apigw/v1/paracell/api/relationInfo/queryPlatRelation",
          method: "post",
          data: {
            searchType:e,
            startTime:this.startTime,
            endTime:this.endTime
          }
        }).then(
          res => {
            this.showLoading = false;
            if (res.data.success) {
              this.platInData = res.data.data;
            } else {
              this.showLoading = false;
              alert(res.data.error);
            }
          },
          err => {
            this.showLoading = false;
            alert(err);
          }
        );
      },
      platSelectShow:function(){
        this.$router.back()
      },
      openStartPicker() {
        this.$refs.startPicker.open();
      },
      openEndPicker(){
        this.$refs.endPicker.open();
      },
      handleStartConfirm:function(e){
        this.startTime = this.format(e, 'yyyy-MM-dd')
      },
      handleEndConfirm:function(e){
        this.endTime = this.format(e, 'yyyy-MM-dd')
      },
      searchPlat:function(){
        this.platInFo(this.platSelect)
      }
    },
    watch:{
      platSelect:function(val, oldVal){
        this.platInFo(val)
      },
    },
    created:function(){
      this.platInFo('gm')
    },
}
</script>

<style lang="scss">
.plat {
  height: 100%;
  background: white;
  
  
  .needToDo {
    position: relative;
    top: 0px;
    span {
      position: absolute;
      top: 3px;
      border-radius: 50%;
      background: red;
      color: white;
      padding: 2px 4px;
    }
  }
  .search {
    background: #eee;
    
    display: flex;
    height: 30px;
   justify-content: space-between;
    margin: 4px;
    border-radius: 15px;
    line-height: 30px;
    // div {
    //   display: flex;
    //   height: 30px;
    //   background: white;
    //   margin: 4px;
    //   border-radius: 15px;
    // }
    i {
      line-height: 30px;
    }
    p {
      display: inline-block;
      line-height: 30px;
      height: 30px;
      width: 100px;
      border-radius: 15px;
    }
    button {
      font-size: 12px;
      width: 60px;
      height: 30px;
      border-radius: 15px;
    }
  }

  .showPlat{
    background: white;
   .mint-cell{
     background: white;
     .mint-cell-wrapper{
       border: none;
     }
   }
   .mint-cell-value{
     width: 100%;
     &>div{
       width: 100%;
     }
    table{
      width: 93.5%;
      margin: 10px 3%;
      text-align: center;
      border-color:rgba(38, 162, 255, 0.51);;
      thead{
        td{
          color:#26a2ff;
        }
        
      }
    }
  }
  }

  
}
</style>

